<template>
  <el-page-header>
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item >
          <router-link to="/manager/mangerindex" class="menu-router">首页</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item
        ><router-link to="/manager/manaageitempack" class="menu-router">菜品套餐管理</router-link></el-breadcrumb-item
        >
      </el-breadcrumb>
    </template>
    <template #content>
      <span class="text-large font-600 mr-3">菜品套餐管理</span>
    </template>
  </el-page-header>
  <el-button type="primary" @click="showdiglog1=true">添加套餐</el-button>
  <el-button type="primary" @click="showdiglog6=true">一键设置套餐折扣</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
        prop="imageUrl"
        label="图片"
        width="180">
      <template #default="{ row }">
        <el-image
            v-if="row.imageUrl"
            :src="row.imageUrl"
            fit="cover"
            style="width: 50%; height: 50%;">
          <div slot="error" class="image-slot">
            图片加载失败
          </div>
        </el-image>
      </template>
    </el-table-column>
    <el-table-column fixed prop="description" label="套餐名称" width="120" />
    <el-table-column prop="allprice" label="套餐总价" width="100" />
    <el-table-column prop="isdelete" label="状态" width="600" >
      <template #default="{ row }">
        <span :style="{ color:row.color, fontWeight: 'bold' , fontSize: '15px', fontFamily: 'Arial, sans-serif'}">{{ row.isdelete}}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120" >
      <template #default="{row}">
        <el-button link type="primary" size="small" class="el-button1" @click="showdiglog2s(row)" >修改套餐详情</el-button>
        <el-button link type="primary" size="small" @click="getitemListBypackid(row.id)">添加套餐菜品</el-button>
        <el-button link type="primary" size="small" @click="showdiglog4s(row)">修改套餐价格</el-button>
        <el-button link type="primary" size="small" @click="showdiglog5s(row)">修改套餐折扣</el-button>
        <el-button link type="primary" size="small" @click="deletitempack(row)">{{row.button}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="showdiglog1"
      title="添加套餐"
      width="500"
      align-center
  >

    <div class="diglog-div">
      <span>请输入新套餐描述:   </span>
      <el-input
          v-model="description"
          style="width: 240px"
          type="text"
          placeholder="请输入新的套餐描述"
      />
    </div>

    <div>
      <span class="diglog-span">上传菜品图片: </span>
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/food/updateuserimageurl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showdiglog1=false" type="primary">取消</el-button>
        <el-button @click="insertitempackBybakground()" type="success">添加</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="showdiglog2"
      title="修改套餐详情"
      width="500"
      align-center
  >
    <div class="diglog-div">
      <span>请输入新套餐描述:   </span>
      <el-input
          v-model="description"
          style="width: 240px"
          type="text"
          placeholder="请输入新的套餐描述"
      />
    </div>
    <div>
      <span class="diglog-span">上传菜品图片: </span>
      <el-upload
          class="avatar-uploader"
          action="http://localhost:8090/food/updateuserimageurl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showdiglog2=false" type="primary">取消</el-button>
        <el-button @click="updateitempack()" type="success">修改</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="showdiglog3"
      title="修改套餐菜品"
      width="800"
      align-center
  >
    <span>已有菜品详情:</span>
<el-table :data="itemList" style="width: 100%">

  <el-table-column
      prop="imageUrl"
      label="图片"
      width="180">
    <template #default="{ row }">
      <el-image
          v-if="row.imageUrl"
          :src="row.imageUrl"
          fit="cover"
          style="width: 50%; height: 50%;">
        <div slot="error" class="image-slot">
          图片加载失败
        </div>
      </el-image>
    </template>
  </el-table-column>
  <el-table-column prop="itemname" label="菜品名称" width="120" />
  <el-table-column prop="price" label="菜品价格" width="600" />
  <el-table-column fixed="right" label="操作" width="120" >
    <template #default="{row}">
      <el-button  type="primary"  class="el-button1" @click="deleteitempackItem(row)" >移除</el-button>
    </template>
  </el-table-column>
</el-table>
  <div style="margin-bottom: 30px"><span style="color: red ;font-size: 20px">套餐总价:￥{{allprice}}元</span></div>
<span>所有菜品详情:</span>
    <el-table :data="currentPageItems" style="width: 100%">
      <el-table-column
          prop="imageUrl"
          label="图片"
          width="180">
        <template #default="{ row }">
          <el-image
              v-if="row.imageUrl"
              :src="row.imageUrl"
              fit="cover"
              style="width: 50%; height: 50%;">
            <div slot="error" class="image-slot">
              图片加载失败
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="itemname" label="菜品名称" width="120" />
      <el-table-column prop="price" label="菜品价格" width="600" />
      <el-table-column fixed="right" label="操作" width="120" >
        <template #default="{row}">
          <el-button  type="primary"  class="el-button1" @click="additempackitem(row)" >添加</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="totalItems"
        :page-size="pageSize"
        v-model:currentPage="currentPage"
        class="mt-4"
    />

  </el-dialog>

  <el-dialog v-model="showdiglog4" title="修改套餐价格" width="500" align-center>
    <div class="diglog-div">
      <span>请输入新套餐价格:   </span>
      <el-input
          v-model="allprice"
          style="width: 240px"
          type="text"
          placeholder="请输入新的套餐价格"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showdiglog4=false" type="primary">取消</el-button>
        <el-button @click="updateitempakcpricem()" type="success">修改</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="showdiglog5" title="修改套餐折扣" width="500" align-center>
    <div class="diglog-div">
      <span>请输入新套餐折扣:   </span>
   <el-select v-model="account" placeholder="请选择折扣" style="width: 240px">
     <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value"
     />
   </el-select>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showdiglog5=false" type="primary">取消</el-button>
        <el-button @click="discountitempackprice()" type="success">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="showdiglog6" title="一键修改套餐折扣" width="500" align-center>
    <div class="diglog-div">
      <span>请输入新套餐折扣:   </span>
      <el-select v-model="account" placeholder="请选择折扣" style="width: 240px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showdiglog5=false" type="primary">取消</el-button>
        <el-button @click="discontallitempack()" type="success">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref,computed} from "vue";
import {
  additempackitemservice,
  deleteitempackItemservice, deletitempackService, discontallitempackService, discountitempackpriceservice,
  getallitempackService, getallmenulistservice, getallpriceBypackIdservice,
  getitemlistBypackidservice,
  insertitempackBybakgroundservice,
  updateitempackservice, updateitempakcpricemservice
} from "../api/food.js";
import {ElMessage} from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import {UploadProps} from "element-plus";
import {a} from "vite/dist/node/types.d-aGj9QkWt";
const description = ref('')
const showdiglog3=ref(false)
const imageUrl = ref('')
const allitemList=reactive([])
const showdiglog1=ref(false)
const tableData = reactive([])
const id = ref()
const account = ref()
const allprice = ref(0)
const currentPage = ref(1); // 当前页数
const pageSize = ref(10);
const itemList=reactive([])
const showdiglog2=ref(false)
const showdiglog4=ref(false)
const showdiglog5=ref(false)
const showdiglog6=ref(false)
onMounted(()=>{
  getallitempack()
  getallitemlist()
})
const options=reactive([
    {
      value: 0.5,
      label: '5折',
    },
    {
      value: 0.6,
      label: '6折',
    },
    {
      value: 0.7,
      label: '7折',
    },
    {
      value: 0.8,
      label: '8折',
    },
    {
      value: 0.9,
      label: '9折',
    },
   {
     value: 10,
     label: '减十元'
   },
    {
      value: 20,
      label: '减二十元'
    },
    {
      value: 30,
      label: '减三十元'
    },
    {
      value: 40,
      label: '减四十元'
    },

])
const getallitempack = async () => {
  const response = await getallitempackService()
  tableData.length=0
  if(response.code===200){
    response.date.forEach((item) => {
      if (item.isdelete === 0) {
        item.isdelete = "套餐状态正常"
        item.color = "green"
        item.button = "下架套餐"
      }
      if (item.isdelete === 1) {
        item.isdelete = "套餐已下架"
        item.color = "red"
        item.button = "上架套餐"
      }
      tableData.push(item)

    }
    )
    ElMessage.success("套餐获取成功")
  }else {
    ElMessage.error("套餐获取失败")
  }

}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
) => {
  imageUrl.value =response.date

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
const insertitempackBybakground =async ()=>{
  const response=await insertitempackBybakgroundservice(description,imageUrl)
  if(response.code===200){
    ElMessage.success("添加套餐成功")
    await getallitempack()
    showdiglog1.value=false
  }else {
    ElMessage.error("添加套餐失败")
  }
}
const showdiglog2s = (row) => {
  showdiglog2.value=true
  id.value=row.id

}
const updateitempack =async ()=>{
  const response=await  updateitempackservice(id,description,imageUrl)
  if(response.code===200){
    ElMessage.success("修改套餐成功")
    await getallitempack()
    showdiglog2.value=false
  }else {
    ElMessage.error("修改套餐失败")
  }
}
const getitemListBypackid =async (ids) => {
  const response=await getitemlistBypackidservice(ids)
  id.value=ids
  itemList.splice(0,itemList.length)
  showdiglog3.value=true
  if(response.code===200){
    response.date.forEach((item) => {
      itemList.push(item)
    })
    await getallpriceBypackId()
    ElMessage.success("套餐菜品获取成功")

  }else {
    ElMessage.error("套餐菜品获取失败")
  }

}
const getallitemlist = async () => {
  const response = await getallmenulistservice();
  allitemList.splice(0, tableData.length);
  if(response.code===200){

    response.date.forEach((item) => {
      allitemList.push(item)

    })
    ElMessage.success("菜品获取成功")
  }
  else {
    ElMessage.error("菜品获取失败")
  }
}

const currentPageItems = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return allitemList.slice(startIndex, endIndex);
});
const totalItems = computed(() => allitemList.length);

const getallpriceBypackId =async () => {
  const response = await getallpriceBypackIdservice(id)
  if(response.code===200){
    allprice.value=response.date
    ElMessage.success("套餐总价获取成功")
  }else {
    ElMessage.error("套餐总价获取失败")
  }
}
const deleteitempackItem =async (row) => {
  const response=await deleteitempackItemservice(row.id,id)
  if(response.code===200){
    ElMessage.success("删除套餐菜品成功")
    await getitemListBypackid(id.value)
    await getallpriceBypackId()
  }else {
    ElMessage.error("删除套餐菜品失败")
  }

}
const additempackitem=async (row) => {
  const response=await additempackitemservice(row.id,id.value)
  if(response.code===200){
    ElMessage.success("添加套餐菜品成功")
    await getitemListBypackid(id.value)
    await getallpriceBypackId()
  }else {
    ElMessage.error("添加套餐菜品失败")
  }
}
const showdiglog4s = (row) => {
  showdiglog4.value=true
  id.value=row.id
}
const updateitempakcpricem = async () => {
  const response=await updateitempakcpricemservice(id.value,allprice.value)
  if(response.code===200){
    ElMessage.success("套餐价格修改成功")
    showdiglog4.value=false
    await getallitempack()
  }else {
    ElMessage.error("套餐价格修改失败")
  }
}
const showdiglog5s = (row) => {
  showdiglog5.value=true
  id.value=row.id
}
const discountitempackprice = async () => {
  const response=await discountitempackpriceservice(id.value,account.value)
  if(response.code===200){
    ElMessage.success("套餐折扣成功")
    showdiglog5.value=false
    await getallitempack()
  }else {
    ElMessage.error("套餐折扣失败")
  }

}
const discontallitempack = async () => {
  const response=await discontallitempackService(account)
  if(response.code===200){
    ElMessage.success("一键套餐折扣成功")
    await getallitempack()
    showdiglog6.value=false
  }else {
    ElMessage.error("一键套餐折扣失败")
  }

}
const deletitempack = async (row) => {
  const response=await deletitempackService(row.id)
  if(response.code===200){
    ElMessage.success("删除套餐成功")
    await getallitempack()
  }else {
    ElMessage.error("删除套餐失败")
  }

}
</script>

<style scoped>
.el-button1{
  margin-left: 13px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>